<template>
  <div id="userVerified">
    <!--后退-->
    <img class="back" src="../../../assets/homepage/chanel.png" alt="" onclick="history.go(-1)">
    <div class="header">
        <section class="one">
            <img src="../../../assets/homepage/unphone.png" alt="">
            <p>手机验证</p>
        </section>
        <img src="../../../assets/homepage/arrow.png" alt="">
        <section class="two">
            <img src="../../../assets/homepage/people.png" alt="">
            <p>实名认证</p>
        </section>
         <img src="../../../assets/homepage/arrow.png" alt="">
        <section class="three">
            <img src="../../../assets/homepage/unpsw.png" alt="">
            <p>交易密码设置</p>
        </section>
    </div>
    <div class="certified">
        <section>
            <p>
                <input v-model="userConfirm.realName" type="text" placeholder="请输入真实姓名" style="color:#8a8a8a;width:100%;">
            </p>
            <p>
                <input v-model="userConfirm.schoolNumber" type="text" placeholder="请输入学号" style="color:#8a8a8a;width:100%;">
            </p>    
            <p>
                <el-upload
                    class="avatar-uploader"
                    action="http://haixia.yaowk.xin/file"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="userConfirm.common1" :src="userConfirm.common1" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </p>
            <p>请上传学生证正面&nbsp&nbsp要求清晰</p>
        </section>
        <section> 
            <p>认证通过后</p>
            <p><span>√可发布任务</span><span>√可接受任务</span><span>√可享受福利模块</span></p>
            <p @click="next">下一步</p>
        </section>
    </div>
    
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  data () {
    return {
        active:0,
        // userConfirm
        userConfirm:{
            realName:undefined,
            schoolNumber:undefined,
            common1:undefined,
            phoneNumber:undefined,
            verifyCode:undefined,
        }
    }
  },
  created(){
      this.userConfirm.phoneNumber = this.$route.params.data.phoneNumber
      this.userConfirm.verifyCode = this.$route.params.data.verifyCode
  },
  methods:{
    handleAvatarSuccess(res, file) {
        this.userConfirm.common1 = res.data.file;
    },
    next(){
        this.$router.push({
            path: '/setPassword',
            name: 'setPassword', 
            params: {
                name: 'setPassword',
                data:this.userConfirm,
            }
            
        })
        // this.$router.push({
        //     path:'/setPassword',
        //     name:setPassword,
        //     params:{
        //          userConfirmData:this.userConfirm
        //     }
        // })
    }
  }
}
</script>
<style>
#userVerified{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/homepage/Verified.png);
}
#userVerified .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
}
#userVerified .header{
    height:15%;
    width:75%;
    padding:1.5rem 0px;
    margin:0px auto;
    display:flex;
    justify-content:space-between;
}
#userVerified .header > img{
     height:0.05rem;
     width:2.5rem;
     margin-top:0.75rem;
}
#userVerified .header .one{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#8a8a8a;
}
#userVerified .header .two{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#29a193;
}
#userVerified .header .three{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#8a8a8a;
}
#userVerified .header > section >img {
    height:1.5rem;
    width:1.5rem;
}
#userVerified .avatar-uploader{
    width:100%;
    height:100%;
}
#userVerified  .avatar-uploader .el-upload{
     width:100%;
    height:100%;
}
#userVerified .avatar-uploader-icon{
    width:100%!important;
    height:100%!important;
    line-height:6rem!important;
}
#userVerified  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
#userVerified .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
#userVerified .avatar-uploader-icon {
    font-size: 1.4rem;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height:100%;
    text-align: center;
}
#userVerified .avatar {
    width: 100%;
    height: 100%;
    display: block;
}
#userVerified .certified{
    width:85%;
    font-size:0.75rem;
    margin:1.5rem auto;
    background:#fff;
    box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;
    border-radius:13px;
}
#userVerified .certified section:nth-child(1){
    padding:1.5rem 3.25rem 0px 3.25rem;
}
#userVerified .certified section:nth-child(1) > p:nth-child(1){
    line-height:1.5rem;
    border-bottom:1px solid #8a8a8a;
}
#userVerified .certified section:nth-child(1) > p:nth-child(2){
    line-height:1.5rem;
    border-bottom:1px solid #8a8a8a;
    margin-top:1.5rem;
}
#userVerified .certified section:nth-child(1) > p:nth-child(3){
    height:6.75rem;
    width:10.7rem;
    background:#f5f5f5;
    margin:1.5rem auto 0px;
}
#userVerified .certified section:nth-child(1) > p:nth-child(4){
    margin-left:0.25rem;
    font-size:0.6rem;
    color:#383b3d;
    line-height:1.5rem;
}
#userVerified .certified section:nth-child(2){
    padding:0px 2.5rem 1.5rem 2.5rem;
    color:#8a8a8a;
}
#userVerified .certified section:nth-child(2) > p:nth-child(1){
    border-bottom:1.5px solid #8a8a8a;
    line-height:1rem;
    text-align:center;
    font-size:0.6rem;
}
#userVerified .certified section:nth-child(2) > p:nth-child(2){
    display:flex;
    justify-content:space-between;
    font-size:0.6rem;
    margin:0.5rem 0px 1.5rem;
}
#userVerified .certified section:nth-child(2) > p:nth-child(3){
    width:50%;
    margin:0px auto;
    background:#29a193;
    text-align:center;
    color:#fff;
    height:2rem;
    line-height:2rem;
    border-radius:8px;
}

</style>